<template>
	<view class="container">
		<!-- 顶部 -->
		<view class="header font38">
			<image src="../../static/my_img/arrow_l.png" mode="" @tap="back"></image>
			<text class=" colorfff">S级认购</text>
			<image src="../../static/equity_img/record.png" mode=""></image>
			<!-- S级认购浮框 -->
			<view class="floatFrame">
				<text class="font26" style="color: #8c8f9d;">S级认购总收益</text>
				<text class="font40 bold" style="color: #393d51;">7,258,422.00</text>
				<view class="hang font26">
					<text style="color: #848796;">AD积分</text>
					<text class="m_l20" style="color: #393d51;">254,2587.00</text>
				</view>
			</view>
		</view>
		
		<!-- 认购列表 -->
		<view class="main">
			<view class="li m_t20" v-for="(item, index) in list" :key="index" @click="go">
				<view class="row">
					<text class="colorred font36">{{item.percentage}}%</text>
					<text class="font30 color_icon_txt">{{item.date}}</text>
				</view>
				<view class="row" style="font-size: 24upx;color: #b2b2b2;">
					<text>预期收益率</text>
					<text>S级认购 理财有风险投资需谨慎</text>
				</view>
				<view class="tips m_t14">
					<text>50%AD积分</text>
					<text>50%现金</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [{
					"percentage": "5.20",
					"date": "限购1000  期限110天"
				},{
					"percentage": "5.21",
					"date": "限购2000  期限200天"
				},{
					"percentage": "12.24",
					"date": "限购3000  期限290天"
				},{
					"percentage": "12.12",
					"date": "限购3000  期限290天"
				},{
					"percentage": "1.28",
					"date": "限购3000  期限290天"
				},{
					"percentage": "6.24",
					"date": "限购3000  期限290天"
				},{
					"percentage": "10.01",
					"date": "限购3000  期限290天"
				},{
					"percentage": "12.25",
					"date": "限购3000  期限290天"
				}]
			}
		},
		methods: {
			back () {
				uni.navigateBack({
					delta: 1
				});
			},
			go () {
				uni.navigateTo({
					url: "/pages/equity/s_detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
	}
	
	.container {
		width: 100%;
		height: 100%;
		position: relative;
		.header {
			width: 100%;
			display: flex;
			position: fixed;
			background: #5E81F7;
			justify-content: space-between;
			align-items: center;
			padding: 30upx 30upx 180upx 30upx;
			
			image:nth-of-type(1) {
				width: 14upx;
				height: 20upx;
			}
			
			image:nth-of-type(2) {
				width: 40upx;
				height: 40upx;
			}
			
			.floatFrame {
				width: 94vw;
				height: 200upx;
				z-index: 1;
				position: absolute;
				top: 130upx;
				left: 3vw;
				background: url("../../static/my_img/money_bg.png");
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				padding: 34upx 22upx;
				justify-content: space-between;
			}
		}
		
		.main {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #f4f4f8;
			width: 100%;
			min-height: 20vh;
			overflow: auto;
			padding: 328upx 0 30upx 0;
			
			.li {
				width: 92vw;
				padding: 24upx;
				background: #ffffff;
				border-radius: 12upx;
				display: flex;
				flex-direction: column;
				
				.row {
					display: flex;
					align-items: center;
					text:nth-of-type(1) {
						width: 28vw;
					}
				}
				
				.tips {
					display: flex;
					align-items: center;
					color: #6669cb;
					font-size: 22upx;
					text {
						margin-right: 14upx;
						padding: 8upx 16upx; 
						border: 1upx solid #6669cb;
					}
				}
			}
		}
	}
</style>
